<script setup lang="ts">
import { Cell } from '@antv/x6'
import { ImagePicker } from '@yk/components/draw/shapes/components/image-picker'
import { ObjectUtil } from '@utils/object-util'

const props = defineProps<{
  cell: Cell | any
}>()

let _cell = toRaw(props.cell)

watch(() => props.cell, () => {
  _cell = toRaw(props.cell)
  init()
})

onMounted(() => {
  init()
})

function init () {
  saveForm.value = ObjectUtil.copy(props.cell.data.dataConfig.dataOption)
}

// region TODO 表单
const saveForm = ref<any>({})
function dataTypeChange () {
  if (saveForm.value.dataType) {
    const dataType = saveForm.value.dataType
    saveForm.value = ({
      historicalData: { dataType, dataRange: null },
      liveDataToday: { dataType }
    })[saveForm.value.dataType]
  } else {
    saveForm.value = {}
  }
}
// endregion

// region TODO 历史数据
function historicalData () {
  if (ObjectUtil.isNotEmpty(saveForm.value.dataRange)) {
    _cell.data.dataConfig.dataOption = saveForm.value
    ElMessage.success('已绑定')
  } else {
    ElMessage.info('请选择数据范围')
  }
}
// endregion

// region TODO 今日实时数据
function liveDataToday () {
  _cell.data.dataConfig.dataOption = saveForm.value
  ElMessage.success('已绑定')
}
// endregion

</script>

<template>
  <el-collapse-item title="数据类型" name="DataType">
    <el-form-item label="展示数据">
      <el-select v-model="saveForm.dataType" @change="dataTypeChange">
        <el-option value="historicalData" label="历史数据" />
        <el-option value="liveDataToday" label="今日实时数据" />
      </el-select>
    </el-form-item>
    <template v-if="saveForm.dataType === 'historicalData'">
      <el-form-item label="数据范围">
        <div class="d-flex">
          <span>近</span>
          <el-input-number
            v-model="saveForm.dataRange"
            class="mx-2" :min="1" :max="7"
            :step="1"
            style="width: 100px;"
          />
          <span>天</span>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="mt-2" @click="historicalData">确定</el-button>
      </el-form-item>
    </template>
    <template v-else-if="saveForm.dataType === 'liveDataToday'">
      <el-form-item>
        <el-button type="primary" class="mt-2" @click="liveDataToday">确定</el-button>
      </el-form-item>
    </template>
  </el-collapse-item>
</template>

<style scoped lang="scss">
</style>
